<template>
  <div>
    <van-nav-bar
      class="vnb"
      title="排行榜"
      left-arrow
      @click-left="onBack"
    />
    <menu-bar
      class="mb"
      :menus="menus"
      :current-path="currentPath"
      :tabs-class="tabsClass"
    />
    <refresh-list
      ref="refreshList"
      @pull-refresh="handleRefresh"
      @pull-load="handlePullLoad"
    >     
      <div class="list"
        v-for="(item, index) in videoList"
        :key="item.aid"
      >
        <span class="list-order">{{ index+1 }}</span>
        <video-item
          class="list-content"
          :aid="item.aid"
          :bvid="item.bvid"
          :author="item.author"
          :title="item.title"
          :coverPath="item.pic"
          :view="item.play"
          :danmaku="item.video_review"
          :duration="item.duration"
          :allParams="item"
          layout="ltr"
        />
      </div>

    </refresh-list>

  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from 'vuex'
import { NavBar as VanNavBar} from 'vant'
import MenuBar from '@/components/menu-bar/MenuBar'
import VideoItem from '@/components/video-item/VideoItem'
import RefreshList from '@/components/refresh-list/RefreshList'
import * as types from '@/store/mutation-types'
export default {
  name: 'Rank',
  inject: ['routerConfig', 'rootTitle'],
  metaInfo () {
    return {
      title: `排行榜-${this.rootTitle}`
    }
  },
  components: {
    MenuBar,
    VanNavBar,
    RefreshList,
    VideoItem
  },
  props: {
    id: {
      type: [Number, String]
    }
  },
  data () {
    return {
      tabsClass: 'top-menu-bar',
      currentPage: 1,
      pageSize: 10
    }
  },
  computed: {
    rid () {
      let id = 0
      if (this.id) {
        id = this.id - 0
        if (id === 167) {
          id = 168
        }
      }
      return id
    },
    currentPath () {
      return `/rank${this.id ? ('/' + this.id) : ''}`
    },
    menus () {
      const arr = []
      for (const c of this.routerConfig) {
        const { name, tid, route, hide } = c
        if (hide) {
          continue
        }
        arr.push({
          title: name === '首页' ? '全站' : name,
          path: route === '/' ? '/rank' : `/rank/${tid}`
        })
      }
      return arr
    },
    ...mapState('rank', ['list']),
    currentList() {
      const match = this.list.find(item => item.id === this.rid)
      let arr = []
      if (match) {
        arr = match.data
      }
      return arr
    },
    totalPage () {
      return Math.ceil(this.currentList.length / this.pageSize)
    },
    videoList () {      
      return this.currentList.slice(0, this.currentPage * this.pageSize)
    }
  },
  watch: {
    id: {
      immediate: true,
      handler (newVal) {
        if (this.checkUrl()) {
          this.resetData()
          this.handleTab()
        }
      }
    }
  },
  created () {
    this.setHeader(false)
  },
  beforeDestroy() {
    this.setHeader(true)
  },
  methods: {
    ...mapActions('rank', [`${types.GET_RANK}`]),
    ...mapMutations({
      setHeader: `${types.SET_HEADER}`
    }),
    filterUrl(arr, key, values) {
      return arr.filter(item => {
        return values.includes(item[key])
      }).map(item => {
        item = Object.assign({}, item)
        if (item.sub) {
          item.sub = this.filterUrl(item.sub, key, values)
        }
        return item
      })
    },
    checkUrl () {
      let flag = true
      if (this.rid !== 0) {
        const match = this.filterUrl(this.routerConfig, 'tid', [this.id - 0])
        if (match.length === 0) {
          this.$router.replace({ name: '404' })
          flag = false
        }
      }
      return flag
    },
    resetData () {
      this.$refs.refreshList && this.$refs.refreshList.reset()
      this.currentPage = 1
    },
    onBack () {
      this.$router.go(-1)
    },
    handleTab() {
      if (this.currentList.length === 0) {
        this.getData()
      }
    },
    getData () {
      this.GET_RANK({
        rid: this.rid
      }).then(res => {
        this.currentPage = 1
        if (Array.isArray(res) && res.length === 0) {
          this.$refs.refreshList.completeLoad()
        }
      }).catch(err => {
        console.log(err)
        this.$refs.refreshList.showError()
      }).finally(() => {
        this.$refs.refreshList.stopLoad()
        this.$refs.refreshList.stopRefresh()
      })
    },
    handleRefresh() {
      this.getData()
    },
    handlePullLoad () {
      if (this.currentPage < this.totalPage) {
        this.currentPage++
      } else if (this.currentPage === this.totalPage) {
        this.$refs.refreshList.completeLoad()
      }
      this.$refs.refreshList.stopLoad()
    }
  }
}
</script>

<style lang="scss" scoped>
  .vnb{
    position: sticky;
    top: 0;
    z-index: 2;
    height: 46px;
  }
  .vnb ::v-deep {
    .van-nav-bar__title, .van-nav-bar__arrow {
      color: $theme-color;
      font-size: 16px;
    }
  }
  .mb {
    position: sticky;
    top: 46px;
    z-index: 2;
  }
  .top-menu-bar ::v-deep .van-tab{
    flex-basis: 100/6*1% !important;
  }
  .vl{
    padding: {
      top: 5px;
      bottom: 5px;
    }
  }
  .list{
    display: flex;
    &-order{
      width: 30px;
      display: flex;
      align-items: center;
      text-indent: 8px;
      color: $color-text-regular;
      font-size: 14px;
      background-repeat: no-repeat;
      background-size: 60%;
      background-position: 50%;
    }
    &:nth-child(1),
    &:nth-child(2),
    &:nth-child(3) {
      .list-order{
        text-indent: 999px;
      }
    }
    &:nth-child(1) {
      .list-order{
        background-image: url('~@/assets/rank1.png')
      }
    }
    &:nth-child(2) {
      .list-order{
        background-image: url('~@/assets/rank2.png')
      }
    }
    &:nth-child(3) {
      .list-order{
        background-image: url('~@/assets/rank3.png')
      }
    }
    &-content{
      flex: 1;
    }
  }
</style>
